<template>
  <Layout>
    <Breadcrumb :style="{margin: '10px 0'}">
      <BreadcrumbItem>日志管理</BreadcrumbItem>
      <BreadcrumbItem>操作日志</BreadcrumbItem>
    </Breadcrumb>
    <Content>

      <Row :style="{margin:'10px 0'}">
        <Col span="24">
        <Card :bordered="false">
          <div slot="title">
            <Row  :gutter="10">
              <Col span="10">
              操作日志筛选
              </Col>
              <i-col span="4" >
                <Select  filterable clearable @on-change="changeSelect" placeholder="请选择项目">
                  <Option v-for="item in navDepartmentLists" :value="item.name" :key="item.name">{{ item.name }}</Option>
                </Select>
              </i-col>
              <i-col span="4" >
                <DatePicker :value="tiemAcitve"  type="daterange" placement="bottom-end" placeholder="选择时间范围" style="width: 100%"  @on-change="change_time"></DatePicker>
              </i-col>
              <Col span="6">
              <Input v-model="search_value" placeholder="用户名、手机号、操作名称">
              <Button slot="append" icon="ios-search" @click="search_data"></Button>
              </Input>
              </Col>
            </Row>
          </div>
          <div>
            <Button  v-for="(item,index) in navRoleLists" :type="RolechangeRed == index ? 'dashed' :'text' " :key="item.name" @click="changeButton(index,item.name,1)">{{item.name}}</Button>
          </div>
          <!--<div>
            <Button  v-for="(item,index) in navDepartmentLists" :type="DepartmentchangeRed == index ? 'dashed' :'text' " :key="item.name" @click="changeButton(index,item.name,2)">{{item.name}}</Button>
          </div>-->
        </Card>
        </Col>

      </Row>

      <Table height="600" :columns="columns" :data="table_data" @on-selection-change="selected_item"></Table>
      <div style="float: right ; margin: 10px">
        <Page :total="page.page_total"
              :page-size="page.page_size"
              :current="page.page_current"
              :page-size-opts="[14,20,30,40,50]"
              size="small" show-elevator show-sizer
              @on-change="change_page"
              @on-page-size-change="change_page_size"></Page>
      </div>
    </Content>



  </Layout>
</template>

<script>
  export default {
    name: 'RoleList',
    data() {
      return {
        tyle_name:'text' ,
        navLists:[{name:'全部'}],
        navRoleLists:[{name:'全部'}],
        navDepartmentLists:[{name:'全部'}],
        DepartmentActive:'全部项目',
        tiemAcitve:[],
        RoleActive:'全部角色',
        RolechangeRed: 0,//第几个按钮
        DepartmentchangeRed: 0,//第几个按钮
        search_value: '',//搜索框内容
        search_select: 'loginname',//搜索的类型
        modal_edit: false,//添加弹窗
        updata_modal: false,//重置密码确认窗口
        modal_loading: false,//删除loading
        selectd_ids: [],//选中的id
        isLoading: false,//提交数据时按钮的loading效果
        page: {
          page_current: 1,//分页显示第几页
          page_total: 40,//分页总条数
          page_size: 14,//每页多少条
        },
        columns: [
          {
            title: '登录名',
            key: 'loginname'
          },
          {
            title: '用户名',
            key: 'username'
          },
          {
            title: '操作名称',
            key: 'method'
          },
          {
            title: '操作内容',
            key: 'something',
            minWidth:200
          },
          {
            title: '角色',
            key: 'role',
            filters: [
              {
                label: '管理员',
                value: 1
              },
              {
                label: '普通用户',
                value: 2
              }, {
                label: 'vip用户',
                value: 3
              },
            ],
            filterMethod(value, row) {
              return row.role.indexOf(value) > -1;
            }
          },
          {
            title: '项目',
            key: 'department',
            filters: [
              {
                label: '管理员',
                value: 1
              },
              {
                label: '普通用户',
                value: 2
              }, {
                label: 'vip用户',
                value: 3
              },
            ],
            filterMethod(value, row) {
              return row.department.indexOf(value) > -1;
            }
          },
          {
            title: '状态',
            key: 'status'
          },
          {
            title: '操作时间',
            key: 'time'
          },
        ],
        table_data: []
      }
    },
    methods: {
      changeButton(index,role_name,isNumber){

        if(isNumber == 1){
          this.RolechangeRed = index;
          this.RoleActive = role_name ;
        }else {
          this.DepartmentchangeRed = index;
          this.DepartmentActive = role_name ;
        }

        this.getUser_data();
      },
      changeSelect(value){
        /*======================================================
        *@author wf_Huang
        *@Time 2018/10/31 14:06
        *=======================================================
        *@function  下拉筛选
        *=====================================================*/
        if(value == undefined){
          this.DepartmentActive = '全部项目' ;
        }else {
          this.DepartmentActive = value ;
        }
        this.getUser_data();
      },
      change_time(value){
        /*======================================================
        *@author wf_Huang
        *@Time 2018/10/30 10:40
        *=======================================================
        *@function  时间选择
        *=====================================================*/
        console.log(value[0]);
        if(value[0] != ''){
          this.tiemAcitve = value ;
        }else {
          this.tiemAcitve = [] ;
        }

        this.getUser_data();
      },
      selected_item(data) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 16:41
        *=======================================================
        *@function  选中内容时触发
        *
        * data 为已选内容
        *=====================================================*/
        this.selectd_ids = data.map(function (item) {
          if (item != null && item != undefined) {
            return item.id
          }
        }).join();//需要删除的id

      },
      change_page(page) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 17:18
        *=======================================================
        *@function  选择页数时触发
        * page  当前选择的页数
        *=====================================================*/
        this.page.page_current = page
        this.getUser_data();
      },
      change_page_size(page_size) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 17:18
        *=======================================================
        *@function  选择每页多少条时触发
        * page_size  当前每页多少条
        *=====================================================*/
        this.page.page_size = page_size
        this.getUser_data();
      },
      search_data() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 18:30
        *=======================================================
        *@function  搜索内容
        *=====================================================*/
        this.getUser_data();

      },
      getUser_data() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/12 11:36
        *=======================================================
        *@function  获取初始化信息、搜索、分页
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/Log/getLogOperation',
          data: {
            search_value: this.search_value,
            page_current: this.page.page_current,
            navDepartmentLists:  this.DepartmentActive,
            navRoleLists:  this.RoleActive,
            tiemAcitve:  JSON.stringify(this.tiemAcitve),
            page_size: this.page.page_size
          }
        }).then(function (res) {
          var json = res.data;
          if (json.status) {

            this.table_data = json.user_data;
            this.columns[4].filters = json.role_data;
            this.columns[5].filters = json.department_data;
            this.page = json.page;

            this.navRoleLists = json.navRoleLists ;
            this.navRoleLists.unshift({
              date: "2018-10-10 14:46:03",
              description: "全部角色",
              id: 0,
              label: "全部角色",
              name: "全部角色",
              state: "Enable",
              user_number: "0",
              value: "全部角色",
            }) ;

            this.navDepartmentLists = json.navDepartmentLists ;
            this.navDepartmentLists.unshift({
              date: "2018-10-10 14:46:03",
              description: "全部项目",
              id: 0,
              label: "全部项目",
              name: "全部项目",
              state: "Enable",
              user_number: "0",
              value: "全部项目",
            }) ;

            this.$Loading.finish();
          } else {
            this.$Notice.error({title: '登录信息不存在~~~'});
            this.$Loading.error();
          }


        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '初始化数据失败，错误：',desc:'错误：'+ err});
        }.bind(this))
      }

    },
    mounted() {
      this.getUser_data();
    }
  }
</script>

<style scoped>
  .user_text{
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85098);
    line-height: 18px;
    display: block;
    margin-bottom: 16px;
  }
  .ivu-col{
    font-size: 14px;
    line-height: 35px;
  }
</style>
